<template>
  <Row>
    <div class="bg-light lter b-b wrapper-md clearfix titleBtns w-p" style="color: black">
      <h4 class="m-n font-thin pull-left">数据库 > Mongodb > 实例列表</h4>
    </div>

    <div class="wrapper-md text-s">
      <div class="panel panel-default form-horizontal form" role="form" >
        <div class="panel-heading" style="color: cornflowerblue">
          <strong>数据列表</strong> 是带有操作系统的主机模板.用户可以基于已有映像创建主机,也可以将自有主机捕获为新映像,以备后用
          系统映像为官方提供的模板.会提供主流的Linux | Windows模板,并根据上游厂商更新版本
          有映像创建主机,也可以将自有主机捕获,供的模板.会提供主流的Linux | Windows模板
        </div>
        <Row type="flex" justify="space-between" class="control" style="color: gainsboro">
          <div class="table-style">
            <Button @click="refresh = true" ><Icon type="refresh"><i class="fa fa-trash"></i> </Icon>刷新</Button>
            <Button @click="Add = true" ><Icon type="plus-round"><i class="fa fa-plus"></i></Icon> 新建实例</Button>
            <Select v-model="model1" style="width:100px " placeholder="城市">
              <Option style="color: gainsboro" v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
          <div class="search-bar">
            <Input placeholder="实例名称 ..." v-model="keyword" style="width: 300px"></Input>
            <Button type="ghost" @click="search"><Icon type="ios-search"><i class="fa fa-search"></i></Icon></Button>
          </div>
        </Row>

        <!-- 2.2 显示内容表格 -->
        <Table stripe :data="tableData"
               :columns="tableColumns"
               @on-select="onSelect"
               @on-select-all="onSelectAll"
               @on-selection-change="onSelectionChange">
        </Table>
        <!-- 2.3 分页导航navigation -->
        <Row type="flex" justify="space-between" class="footer">
          <div></div>
          <div style="margin: 10px;overflow: hidden">
            <Page :total="total" @on-page-size-change="pageSizeChange" @on-change="changePage" :current="pageNumber" :pageSize="pageSize" size="small" placement="top" show-elevator show-sizer ></Page>
          </div>
        </Row>
      </div>
    </div>
  </Row>






</template>
<script>
  export default {
    data () {
      return {
        tableColumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '实例名称',
            key: 'dbInstanceId'
          },
          {
            title: '运行状态',
            key: 'runningStatus'
          },
          {
            title: '版本',
            key: 'engineVersion'
          },
          {
            title: '可用区',
            key: 'regionName'
          },
          {
            title: '配置',
            key: 'configuration'
          },
          {
            title: '创建时间',
            key: 'creationTime'
          },
          {
            title: '到期时间',
            key: 'expireTime'
          },

          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editShow(params)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.editRemove(params)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ]
      }
    }
  }
</script>
